<template>
<div>
  <van-tabs :active="active"  scrollspy sticky lazy-render>
    <van-tab v-for="(item,index) in classlist" :title="item.cat_name" :key="index">
       <div v-for="item2 in item.children" :key="item2.cat_id">
         <van-nav-bar :title="item2.cat_name" />
           <van-grid square column-num="4">
             <van-grid-item @click="getId(item3.cat_name)"  v-for="(item3,index) in item2.children" :key="index" :icon="item3.cat_icon" :text="item3.cat_name" />
           </van-grid>
       </div>
    </van-tab>
  </van-tabs>
</div>
</template>

<script>
import {mapActions,useStore,}from 'vuex'
import {toRefs,ref}from 'vue'
import {useRouter}from "vue-router"
export default {
  name: "classification",
  setup(){
    const store=useStore();
    const router=useRouter()
    const active=ref(0)
    store.dispatch('classcation/getclass')
    const getId=(name)=>{
      router.push({
        path:'/list',
        query:{
          name
        }
      })
    }
    return{
      ...toRefs(store.state.classcation),active,getId
    }
  },
  methods:{
    ...mapActions['getclass']
  }
}
</script>

<style scoped>

</style>